<template>
    <div class="swiper">
        <el-container>
            <div class="block text-center bannerbox" m="t-4" style="width: 100%;">
                <el-carousel trigger="click" height="250px">
                    <el-carousel-item>
                        <h3 class="small justify-center" text="2xl"><img
                                src="http://www.mobiletrain.org/2023/1215/1702620603846.jpg" alt="" class="banimg"></h3>
                    </el-carousel-item>
                    <el-carousel-item>
                        <h3 class="small justify-center" text="2xl"><img
                                src="http://www.mobiletrain.org/2023/1215/1702632113223.jpg" alt="" class="banimg"></h3>
                    </el-carousel-item>
                    <el-carousel-item>
                        <h3 class="small justify-center" text="2xl"><img
                                src="http://www.mobiletrain.org/2023/1215/1702632326989.jpg" alt="" class="banimg"></h3>
                    </el-carousel-item>
                    <el-carousel-item>
                        <h3 class="small justify-center" text="2xl"><img
                                src="http://www.mobiletrain.org/2023/1215/1702620644727.jpg" alt="" class="banimg"></h3>
                    </el-carousel-item>
                    <el-carousel-item>
                        <h3 class="small justify-center" text="2xl"><img
                                src="http://www.mobiletrain.org/2023/1130/1701338475411.jpg" alt="" class="banimg"></h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
</script>

<style scoped lang="scss">
.swiper {
    width: 100%;
    height: 34%;
    background: gray;
}



.banimg {
    width: 100%;
    height: 260px;
}


.el-aside .block {
    width: 200px;
}
</style>
